{% extends 'base.html' %}

{% block title %}
	任务管理
{% endblock %}

{% block content %}
	<div class="container">
        <h2>任务管理</h2>
        <h3>示例1</h3>
        <input type="button" value="点击" class="btn btn-primary" onclick="checkMe();">
        <hr>
        <h3>示例2</h3>
        <input id="btn1" type="button" value="点击2" class="btn btn-primary" >
        <hr>
        <h3>示例3</h3>
        <input type="text" id="txtuser" placeholder="用户">
        <input type="text" id="txtmemo" placeholder="描述">
        <input id="btn3" type="button" value="点击3" class="btn btn-primary" >
        <hr>
        <h3>示例4</h3>
        <form id="form4">
            <input type="text" name="user" placeholder="用户">
            <input type="text" name="age" placeholder="年龄">
            <input type="text" name="memo" placeholder="描述">
        </form>
        <input id="btn4" type="button" value="点击4" class="btn btn-primary" >
        <hr>
        <h3>示例5</h3>
        <div>
            <form >
            <div class="form-group">
                {% for field in form %}
                    <label for="exampleInputEmail1">{{ field.label }}</label>
                    {{ field }}
                {% endfor %}

            </div>
            <button type="submit" class="btn btn-success">保存</button>
        </form>
        </div>
    </div>
{% endblock %}

{% block js %}
    <script type="text/javascript">
        {#示例1-1#}
        {#function checkMe() {#}
        {#    console.log("示例1")#}
        {# } #}
        {#示例1-2#}
        function checkMe() {
            $.ajax({
                url:'/d1/task/ajax/',
                type:'post',
                data:{
                    n1:123,
                    n2:234,
                },
                success:function (res) {
                    console.log(res);
                }
            })
        }

        {# 示例2 #}
        $(function () {
            {# 页面框架加载后，代码自动运行#}
            bindBtnEvent();
            bindBrn3Event();
            bindBrn4Event();
        })
        function bindBtnEvent() {
            $('#btn1').click(function () {
                $.ajax({
                    url: '/d1/task/ajax/',
                    type: 'post',
                    data: {
                        n1: 134,
                        n2: 5657,
                    },
                    dataType:'JSON',
                    success: function (res) {
                        console.log(res);
                        console.log(res.status);
                        console.log(res.data);

                    }
                })
            })
        }

        function bindBrn3Event() {
            $('#btn3').click(function () {
                $.ajax({
                    url: '/d1/task/ajax/',
                    type: 'post',
                    data: {
                        n1: $('#txtuser').val(),
                        n2: $('#txtmemo').val(),
                    },
                    dataType:'JSON',
                    success: function (res) {
                        console.log(res);
                        console.log(res.status);
                        console.log(res.data);

                    }
                })
            })
        }

        function bindBrn4Event() {
            $('#btn4').click(function () {
                $.ajax({
                    url: '/d1/task/ajax/',
                    type: 'post',
                    data: $('#form4').serialize(),  //使用$('#form3').serialize() 自动获取打包
                    dataType:'JSON',
                    success: function (res) {
                        console.log(res);
                        console.log(res.status);
                        console.log(res.data);

                    }
                })
            })
        }
    </script>
{% endblock %}